<html>
<!--
https://plus.google.com/communities/100528130097464336279
http://www.1stwebdesigner.com/css/set-text-on-a-circle/
http://www.inkscape.org/en/
http://ionicons.com/
-->
<head>
<link rel="stylesheet" type="text/css" href="css/screen.css">
<link rel="stylesheet" type="text/css" href="css/ionicons.min.css?v=1.4.1" media="screen">
<style>
.watchContainer {
	background-image: url('images/watchbg.png'); width : 346px;
	height: 346px;
	width: 346px;
}

.container {
	overflow: hidden;
	
	-webkit-transform: skew(-5deg,-5deg) translate(-23px,74px) /*rotate(50deg) /* scale(0.7, 0.7) */;
	position: relative;
	font-family: "Ionicons";
	speak: none;
	color: white; font-style : normal;
	font-weight: normal;
	font-variant: normal;
	font-size: small;
	text-transform: none;
	text-rendering: auto;
	line-height: 1;
	letter-spacing: 15px;
	-webkit-font-smoothing: antialiased;
	font-style: normal;
	/* background-color: yellow; */
}
</style>
</head>
<body>
	<div class="watchContainer">
		<div class="container">
			<!-- &#xf231;Facebook
				&#xf243;Twitter
				&#xf235;Google Plus
				&#xf239;LinkedIn
				&#xf23f;Skype
				&#xf2d4;Android Chat
				&#xf2eb;Mail
				&#xf2ea;Map Marker
				&#xf2f7;Settings
				&#xf2d1;Calendar
				&#xf2c8;Alarm
				&#xf2d2;Phone -->
			<p id="demo1">&#xf231;&#xf243;&#xf235;&#xf239;&#xf23f;&#xf2d4;&#xf2eb;&#xf2ea;&#xf2f7;&#xf2d1;&#xf2c8;&#xf2d2;</p>
		</div>
		<div>
			foofoof
		</div>
	</div>
	<script src="js/jquery.min.js"></script>
	<script src="js/plugins.js"></script>
	<script src="js/circletype.min.js"></script>
	<script>
		$('#demo1').circleType();
	</script>
</body>
</html>